<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-04-27 16:29:04
 * @LastEditTime: 2023-06-28 10:07:14
-->
<script setup lang="ts" name="ApproveHandover">
import InitiateHandover from './InitiateHandover.vue'
const activeTab = ref(0)

// 发起新交接
const initiateVisible = ref(false)
const handNewHandover = () => {
  initiateVisible.value = true
}
const handoverData = ref([])
const tableHeader = [
  { label: '被交接人', key: '1' },
  { label: '交接人', key: '2' },
  { label: '交接审批模板', key: '3' },
  { label: '待处理审批单', key: '4' },
  { label: '操作人', key: '5', width: 120 },
  { label: '操作时间', key: '6', width: 140 },
  { label: '被交接人状态', key: '7', width: 120 },
  { label: '操作', width: 100 }
]
</script>

<template>
  <el-card class="iflow-approve-handover" shadow="never">
    <template #header>
      <el-radio-group v-model="activeTab">
        <el-radio-button :label="0">审批流程交接</el-radio-button>
        <el-radio-button :label="1">审批单交接</el-radio-button>
      </el-radio-group>
      <el-button type="primary" @click="handNewHandover">发起新交接</el-button>
    </template>
    <el-table :data="handoverData" style="width: 100%;">
      <template v-for="{ key, label, width } in tableHeader" :key="label">
        <el-table-column
          v-if="key"
          :prop="key"
          :label="label"
          :width="width"
        />
        <el-table-column
          v-else
          :prop="key"
          :label="label"
          :width="width"
        >
          <el-button text type="primary">完成交接</el-button>
        </el-table-column>
      </template>
    </el-table>
    <InitiateHandover :visible="initiateVisible" />
  </el-card>
</template>

<style lang="scss" scoped>
.iflow-approve-handover {
  :deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
    // background-color: var(--el-bg-color-page);
  }
}
</style>
